<template>
  <div class="app-container">
    <!--操作框-->
    <el-row>
      <el-col class="toolbar">
        <el-form :inline="true">
          <el-form-item label="分类">
            <el-select v-model="tag" clearable filterable placeholder="选择类型">
              <el-option
                v-for="(item) in articleTagOptions"
                :key="item.key"
                :label="item.tag_name"
                :value="item.key"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="发布时间">
            <el-date-picker v-model="timestamp" type="date" 
            placeholder="选择日期"
             value-format="yyyy/MM/dd"
            ></el-date-picker>
          </el-form-item>

        
          <el-form-item style="margin-left: 100px">
            <el-button type="success">
              <i class="el-icon-s-operation" />
                <a href="http://www.docpe.com/word/word-to-html.aspx" target="_blank">word转html </a>
            </el-button>
          </el-form-item>

        </el-form>

        <el-form :inline="true">
          <el-form-item label="文章标题" class="article-title">
            <el-input v-model="title" placeholder="请输入文章标题" clearable style="width:400px"></el-input>
          </el-form-item>

       
          
        
        </el-form>
      </el-col>
    </el-row>
    <!--表格-->
    <div class="article-content">
      <h2>请输入文章内容</h2>
      <el-input type="textarea" :rows="20" v-model="content" placeholder="请输入文章内容"></el-input>
    </div>

    <div class="handle-btn">
          <el-button type="primary" @click="handleInfo()">
              <i class="el-icon-plus" />
              发布
            </el-button>
    </div>
  </div>
</template>
<script>

import { fetchList} from '@/api/article/article'

const articleTagOptions = [
  { key: "公司注册", tag_name: "公司注册" },
  { key: "个人独资", tag_name: "个人独资" },
  { key: "税收优惠", tag_name: "税收优惠" },
  { key: "常见问题", tag_name: "常见问题" }
];
export default {
  data() {
    return {
      tag: '',
      timestamp: '',
      articleTagOptions,
      title: '',
      content: ''
    };
  },
  methods: {
    handleInfo() {
      if (this.tag == "" || this.title == "" || this.content == "") {
        this.$message({
          message: "请将信息填写完整",
          type: "warning"
        });
        return;
      }
      console.log(this.tag + this.title + this.content + this.timestamp)

      // todo 请求接口
      var params = {
          title: this.title,
          timestamp: this.timestamp,
          tag: this.tag,
          content: this.content

      }
     


      fetchList(params).then(res =>{
          debugger
      })
    
   


    }
  }
}
</script>
<style scoped>
.handle-btn{
    text-align: center;
    margin: 20px 0;
}
</style>
